<template>
    <div>
        <a-modal
         title="设备设施详情"
         v-model:visible="facilityDetailsVisible" 
         width="70%"
         class="facility-modal-v"
        >
            <div>
                <a-form
                layout="horizontal" 
                class="enterpriseInformation-otherInfor-from" >
                    <a-form-item label="设备名称">
                        <a-input disabled :defaultValue="formState.fyzmc"/>
                    </a-form-item>
                    <a-form-item label="确认方案编号">
                        <a-input disabled :defaultValue="formState.fyzfabh"/>
                    </a-form-item>
                    <a-form-item label="确认报告编号">
                        <a-input disabled :defaultValue="formState.fyzbgbh"/>
                    </a-form-item>
                    <a-form-item label="备注">
                        <a-input disabled :defaultValue="formState.fbz"/>
                    </a-form-item>
                </a-form>
                <a-tabs default-active-key="1">
                    <a-tab-pane key="1" tab="确认记录">
                        <commpVxeTable
                            :key="refreshTable"
                            ref="headmanVxeTable"
                            :config="{
                                api:assessCheckApi.spcyQyInfoQuerySbqrxxPageList,
                                rowId: 'id',
                                height:400,
                                autoHidden:true,
                            }" 
                            :tableData="facilityData"
                            :columns="deviceColumnsVxe" 
                            :formItem="[]"
                            :adaptiveHeight="true"
                        > 
                        </commpVxeTable>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="清洁认证记录">
                        <commpVxeTable
                            :key="refreshTable"
                            ref="headmanVxeTable"
                            :config="{
                                api:assessCheckApi.spcyQyInfoQuerySbqrxxPageList,
                                rowId: 'id',
                                height:400,
                                autoHidden:true,
                            }" 
                            :tableData="cleaningCertificationData"
                            :columns="cleaningCertificationColumnsVxe" 
                            :formItem="[]"
                            :adaptiveHeight="true"
                        > 
                        </commpVxeTable>
                    </a-tab-pane>
                </a-tabs>
            </div>
            <template slot="footer">
                <div>
                    <a-button @click="facilityDetailsVisible = false" style="margin-right: 10px;">关闭</a-button>
                </div>
            </template>
        </a-modal>
    </div>
</template>
<script>
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
export default {
    components:{
        commpVxeTable,
    },
    props:{

    },
    data(){
        return{
            assessCheckApi:assessCheckApi,
            facilityDetailsVisible:false,
            formState:{},
            refreshTable:null,
            facilityData:[{
                fyzmc:'ASMPS-6.8安瓿水浴灭菌柜性能确认',
                fyzfabh:'SOP-VM-11-205-23',
                fyzbgbh:'R-VM-11-205-23',
                fbz:'',
                id:1,
                forder:1,
            },{
                fyzmc:'AJDZ80型安瓿自动灯检机性能确认',
                fyzfabh:'SOP-VM-11-P207-23',
                fyzbgbh:'R-VM-11-P207-23',
                fbz:'',
                id:2,
                forder:2,
            }],
            deviceColumnsVxe:[{
                title: '序号', //列头显示文字
                field: 'forder',
                width:60
            },{
                title: '设备名称', //列头显示文字
                field: 'fyzmc',
            }
            // ,{
            //     title: '确认类型', //列头显示文字
            //     field: 'fwjlx1',
            // }
            ,{
                title: '确认方案编号', //列头显示文字
                field: 'fyzfabh',
            },{
                title: '确认报告编号', //列头显示文字
                field: 'fyzbgbh',
            },{
                title: '备注', //列头显示文字
                field: 'fbz',
            }],
            cleaningCertificationData:[{
                forder:1,
                fyzmc:'中针线配料系统清洁、在线灭菌验证',
                fyzfabh:'SOP-VM-11-4007-22',
                fyzbgbh:'R-VM-11-4007-22',
                fbz:'',
                id:1,
            }],
            cleaningCertificationColumnsVxe:[{
                title: '序号', //列头显示文字
                field: 'forder',
                width:60
            },{
                title: '验证名称', //列头显示文字
                field: 'fyzmc',
            },{
                title: '验证方案编号', //列头显示文字
                field: 'fyzfabh',
            },{
                title: '验证报告编号', //列头显示文字
                field: 'fyzbgbh',
            },{
                title: '附件', //列头显示文字
                field: 'fbz',
            }],
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row){
            this.formState = row
        }
    }
}
</script>
<style lang="less">
.facility-modal-v{
    .enterpriseInformation-otherInfor-from{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .ant-form-item{
            width: 50%;
            display: flex;
            align-items: center;
            .ant-form-item-label{
                width: 130px;
            }
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
        .ant-input-disabled{
            background-color: #fff;
            color: rgba(0, 0, 0, 0.85);
        }
    }
}
</style>